<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <!-- FB Meta Tags -->
        <meta property="og:url" content="https://ggtag.io">
        <meta property="og:type" content="website">
        <meta property="og:title" content="ggtag">
        <meta property="og:description" content="Programmable e-ink tag">
        <meta property="og:image" content="https://ggtag.io/ggtag-512x512.png">
        <!-- Twitter Meta Tags -->
        <meta name="twitter:title" content="ggtag" />
        <meta name="twitter:card" content="summary">
        <meta name="twitter:description" content="Programmable e-ink tag" />
        <meta name="twitter:image" content="https://ggtag.io/ggtag-512x512.png" />
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <title>ggtag receiver</title>
        <meta charset="utf-8">
        <script>var exports = {};</script>
        <script src="https://use.fontawesome.com/02c2083f80.js"></script>
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="../js/ggwave.js"></script>
        <script src="../js/ggtag.js"></script>
        <script src="../js/recv.js"></script>
        <!-- <script src="../js/main.js"></script> -->
        <link rel="apple-touch-icon" sizes="180x180" href="ggtag-180x180.png">
        <link rel="icon" type="image/x-icon" href="../favicon.ico" />
        <!-- Google tag (gtag.js) -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-5PFPRJNYF2"></script>
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'G-5PFPRJNYF2');
        </script>
    </head>
<body>
<div class="container">
  <div class="row my-3 ml-0">
    <canvas id="ggCanvas" width="360" height="240" style="border:2px solid #d3d3d3;">
      Your browser does not support the HTML canvas tag.
    </canvas>
  </div>
  <div class="progress row">
    <div id="progress" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="form-group row mt-3">
    <button type="submit" class="btn btn-sm btn-info mr-3" id="startListen">Start listening</button>
    <button type="submit" class="btn btn-sm btn-danger mr-3" id="stopListen" hidden>Stop listening</button>
    <button type="submit" class="btn btn-sm btn-info mr-3" id="saveTag">Save to PNG</button>
  </div>
  <footer>
    v1.1.0 | <a href="https://github.com/rgerganov/ggtag/blob/master/protocol.md">protocol</a> | <a href="https://github.com/rgerganov/ggtag/releases/tag/v1.1.0">firmware</a>
  </footer>
</div>
<script>
"use strict";

let startListenButton = document.getElementById('startListen');
startListenButton.addEventListener('click', onStartListen);
let stopListenButton = document.getElementById('stopListen');
stopListenButton.addEventListener('click', onStopListen);
let saveButton = document.getElementById('saveTag');
saveButton.addEventListener('click', onSaveTag);

</script>
</body>
</html>
